<template>
  <div class="platform-package views-container">
    <div class="wlm-table">
      <div class="wlm-table-header">
        <el-form
          ref="form"
          :model="form"
          size="small"
          label-width="80px"
          class="retail-form"
          label-position="right"
        >
          <el-form-item
            label="批次号："
            class="search"
          >
            <el-input
              type="number"
              v-model="form.number"
              placeholder="请输入批次号"
              style="width:160px;"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="状态："
            class="search"
          >
            <el-select
              v-model="form.status"
              placeholder="请选择状态"
            >
              <el-option
                label="等待执行"
                value="0"
              ></el-option>
              <el-option
                label="执行中"
                value="1"
              ></el-option>
              <el-option
                label="完成"
                value="2"
              ></el-option>
              <el-option
                label="导出失败"
                value="3"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="选择时间："
            class="search"
          >
            <el-date-picker
              v-model="form.date"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            label=""
            class="filter-btns"
          >
            <el-button
              type="primary"
              @click="searchList"
            >搜索</el-button>
            <el-button type="danger">显示全部</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="wlm-table-content">
        <el-table
          :data="tableData"
          style="width: 100%;"
        >
          <el-table-column
            prop="exportTask"
            label="导出任务ID"
          >
          </el-table-column>
          <el-table-column
            prop="batchNumber"
            label="批次号"
          >
          </el-table-column>
          <el-table-column
            prop="type"
            label="类型"
          >
          </el-table-column>
          <el-table-column
            prop="taskCreationTime"
            label="任务创建时间"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
          >
            <template slot-scope="scope">
              <el-tag
                v-if="scope.row.status == '完成'"
                type="success"
                disable-transitions
              >{{scope.row.status}}</el-tag>
              <el-tag
                v-if="scope.row.status == '执行中'"
                type="warning"
                disable-transitions
              >{{scope.row.status}}</el-tag>
              <el-tag
                v-if="scope.row.status == '等待执行'"
                disable-transitions
              >{{scope.row.status}}</el-tag>
              <el-tag
                v-if="scope.row.status == '导出失败'"
                type="info"
                disable-transitions
              >{{scope.row.status}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="taskCompletionTime"
            label="任务完成时间"
          >
          </el-table-column>
          <el-table-column
            prop="founder"
            label="创建人"
          >
          </el-table-column>
          <el-table-column
            prop="amountOfDownloads"
            label="下载次数"
          >
          </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small"
              >
                下载
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-content flex-row flex-justify-e flex-align-c">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 50]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="4"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'downloadCenter',
  components: {

  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      tableData: [{
        exportTask: '474080',
        batchNumber: '520487340293252275',
        type: '商品订单列表',
        taskCreationTime: '2020-10-13 14:30',
        status: '完成',
        taskCompletionTime: '2020-10-13 14:30',
        founder: 'admin',
        amountOfDownloads: '2'
      }, {
        exportTask: '474080',
        batchNumber: '520487340293252275',
        type: '商品订单列表',
        taskCreationTime: '2020-10-13 14:30',
        status: '等待执行',
        taskCompletionTime: '2020-10-13 14:30',
        founder: 'admin',
        amountOfDownloads: '2'
      }, {
        exportTask: '474080',
        batchNumber: '520487340293252275',
        type: '商品订单列表',
        taskCreationTime: '2020-10-13 14:30',
        status: '执行中',
        taskCompletionTime: '2020-10-13 14:30',
        founder: 'admin',
        amountOfDownloads: '2'
      }, {
        exportTask: '474080',
        batchNumber: '520487340293252275',
        type: '商品订单列表',
        taskCreationTime: '2020-10-13 14:30',
        status: '导出失败',
        taskCompletionTime: '2020-10-13 14:30',
        founder: 'admin',
        amountOfDownloads: '2'
      },],
      pagination: {
        page: 1,
        list_rows: 10,
        pagesizes: [10, 20, 50],
        total: 0
      },
      form: {
        number: '',
        date:'',
        status: '0',
      },
      currentPage4: 4
    }
  },
  methods: {
    searchList() {
      console.log(this.form)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style lang="scss" scoped>
.platform-package {
}
</style>
